<div class="pcode-outer">
  <div nz-row [nzGutter]="[24, 16]">
    <div
      nz-col
      class="gutter-row"
      [nzSpan]="col"
      nz-resizable
      (nzResize)="onResize($event)"
      [nzMinColumn]="3"
      [nzMaxColumn]="20"
      [nzGridColumnCount]="24"
      style="
        border-right-color: lightgray;
        border-right-style: double;
        border-right-width: 3px;
      "
    >
      <nz-resize-handles [nzDirections]="['right']"> </nz-resize-handles>
      <ngx-monaco-editor
        [options]="editorOptions"
        [(ngModel)]="code"
        (onInit)="onInit($event)"
      ></ngx-monaco-editor>
    </div>
    <div
      nz-col
      class="gutter-row"
      [nzSpan]="24 - col"
      style="overflow-y: scroll"
    >
      <nz-card nzTitle="输入区">
        <textarea
          nz-input
          placeholder="你可以在这里预先填写输入数据"
          [nzAutosize]="{ minRows: 2 }"
          [(ngModel)]="this.inputRaw"
          disabled="{{ this.debugging || this.running }}"
        ></textarea>
      </nz-card>
      <nz-card nzTitle="运行区">
        <div style="margin: 5px 0">
          <button
            nz-button
            nzType="primary"
            style="background-color: green"
            (click)="this.run()"
          >
            运行
          </button>
          <button nz-button nzType="default" (click)="this.reset()">
            复位
          </button>
          <button
            nz-button
            nzType="default"
            style="background-color: darkorange; color: white"
            (click)="this.step()"
          >
            单步调试
          </button>
        </div>
        <div>
          <button
            nz-button
            nzType="default"
            style="background-color: blueviolet; color: white"
            (click)="this.runNStep()"
          >
            运行N步
          </button>
          <nz-input-group nzAddOnBefore="N=" style="width: fit-content">
            <nz-input-number
              [(ngModel)]="this.runStepNumber"
              [nzMin]="0"
              [nzStep]="1"
            ></nz-input-number>
          </nz-input-group>
        </div>
        <div *ngIf="this.interpreter" style="font-size: 16px; margin-top: 5px">
          <span>当前运行指令数:{{ this.interpreter?.count }}</span>
        </div>
      </nz-card>
      <nz-card nzTitle="指令区">
        <div *ngIf="this.debugging">
          <div style="font-size: 16px; margin-top: 5px">
            下一条指令：{{ this.nextInstruction }}
          </div>
          <span
            *ngFor="let item of this.interpreter.decorated_stack; let i = index"
            style="display: inline-block"
          >
            <span
              *ngIf="i % 2 === 0"
              style="color: lightgray; margin-left: 5px"
              >{{ i }}</span
            >
            <span [ngClass]="item.class.concat(['stacktag'])">{{
              item.value === undefined ? "&nbsp;&nbsp;" : item.value
            }}</span>
          </span>
        </div>
        <div *ngIf="!this.debugging">
          <nz-select [(ngModel)]="this.importedCode" style="margin-right: 10px">
            <nz-option nzValue="fibonacci" nzLabel="fibonacci"></nz-option>
            <nz-option nzValue="gcd" nzLabel="gcd"></nz-option>
          </nz-select>
          <button nz-button nzType="default" (click)="this.importCode()">
            导入所选代码
          </button>
          <a href="https://gitee.com/xyqlx/pcode-viewer/blob/master/README.md" target="_blank">使用说明</a>
        </div>
      </nz-card>
      <nz-card nzTitle="输出区">
        <div>
          <span style="margin-right: 1em">&gt;</span>
          <nz-tag *ngFor="let item of this.output">{{ item }}</nz-tag>
        </div>
      </nz-card>
      <nz-card nzTitle="转换区">
        <button nz-button nzType="default" (click)="this.convertToMIPS()">
          受限-MIPS-基础
        </button>
        <button nz-button nzType="default" (click)="this.convertToPlantUML()">
          PlantUML-基本流图
        </button>
        <button nz-button nzType="default" (click)="this.convertToMIPSBlock()">
          受限-MIPS-块内
        </button>
        <nz-modal [(nzVisible)]="modalVisible" nzTitle="转换结果" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
          <textarea #convertResult [(ngModel)]="codeContent" style="width: 100%; height: calc(80vh - 200px)"></textarea>
          <div *ngIf="language === 'plantuml'" style="font-size: 16px;">
            你可以访问<a href="http://www.plantuml.com/plantuml/uml/" target="_blank">这里</a>预览PlantUML
          </div>
          <div *nzModalFooter>
            <button nz-button nzType="default" (click)="copyToClipboard(convertResult)">复制到剪贴版</button>
            <button nz-button nzType="default" (click)="downloadContent()">下载</button>
            <button nz-button nzType="primary" (click)="handleOk()">关闭</button>
          </div>
        </nz-modal>
      </nz-card>
    </div>
  </div>
</div>
